<template>
  <div class="upload">
    <div class="upload-list">
      <template v-if="MaxCount === 1">
        <div class="oneImage">
          <a-image
            v-if="FileList"
            :src="FileList"
            alt="用户上传图片"
            style="width: 100px; height: 100px; border-radius: 5px"
          />
          <div class="close" @click="removeImage(null)"><CloseOutlined /></div>
        </div>
      </template>
      <template v-else>
        <div v-for="item in FileList" :key="item" class="upload-list-item">
          <a-image
            :src="item"
            alt="用户上传图片"
            style="
              width: 100px;
              height: 100px;
              cursor: pointer;
              border-radius: 5px;
            "
          />
          <div class="close" @click="removeImage(item)"><CloseOutlined /></div>
        </div>
      </template>
      <a-spin :spinning="spinning">
        <a-upload
          :customRequest="customRequest"
          :max-count="MaxCount"
          :showUploadList="false"
        >
          <div class="item-container">
            <PlusOutlined />
            <div style="margin-top: 8px">请选择图片</div>
          </div>
        </a-upload>
      </a-spin>
    </div>
  </div>
</template>
<script setup>
import { PlusOutlined, CloseOutlined } from "@ant-design/icons-vue";
import { ref } from "vue";
import Compressor from "compressorjs";
import { message } from "ant-design-vue";
import { FileUpload } from "@/api/index.js";

let FileList = defineModel("FileList");
const props = defineProps({
  MaxCount: {
    type: Number,
    default: 1,
  },
});

console.log(FileList.value);

let spinning = ref(false);

const customRequest = async (file) => {
  spinning.value = true;
  let formdata = new FormData();
  let newFile = await handelFile(file.file);
  formdata.append("file", newFile);
  const res = await FileUpload(formdata);
  if (res && res.status === 200) {
    if (props.MaxCount === 1) {
      FileList.value = res.data.url;
    } else {
      FileList.value.push(res.data.url);
    }
    message.success("上传成功");
  } else {
    message.error("上传失败");
  }
  spinning.value = false;
};

const removeImage = (item = null) => {
  if (item) {
    FileList.value = FileList.value.filter((i) => i !== item);
    return;
  }
  FileList.value = "";
};

// 上传前对文件进行压缩
const handelFile = (file) => {
  // 使用压缩方法
  return new Promise((resolve, reject) => {
    new Compressor(file, {
      quality: 0.8, // 压缩质量，0 到 1，值越低文件越小
      maxWidth: 800, // 最大宽度
      maxHeight: 600, // 最大高度
      success(result) {
        // 直接返回压缩后的图像文件
        const imageFile = new File([result], file.name, { type: "image/jpeg" });
        resolve(imageFile); // 返回压缩后的图像文件
      },
      error(err) {
        reject(err); // 错误时返回异常
      },
    });
  });
};
</script>
<style lang="scss" scoped>
@mixin close {
  .close {
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
}

.upload {
  &-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    gap: 15px;

    .oneImage {
      position: relative;
      @include close;
    }

    &-item {
      position: relative;
      @include close;
    }
    .item-container {
      width: 100px;
      height: 100px;
      background-color: #eee;
      border-radius: 5px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 15px;
      cursor: pointer;
    }
  }
}
</style>
